<template>
	<!--重点企业信用评估功能-->
	<div class="corporate-portrait">
		<div class="topBox">
			<el-row>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<div class="boxs">
							<li v-for="(item,index) in listdata" :key="index" :style="{minHeight:item.err?'7vh':'6vh',lineHeight:item.err?'3vh':'5.3vh'}">
								<!-- <img :src="item.img" alt="" :style="{marginTop:item.err?'1vh':'1.25vh'}"> -->
								<span class="colorSpan">{{item.title}}：</span>
								<span>{{item.name}}</span>
								<span class="errorIt" v-if="item.err">{{item.err}}</span>
							</li>
						</div>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getPictorialBar" height="32.7vh" style="padding:0 1vh 3vh 0;"></chart-block>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart3" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="32.7vh" style="padding:0 1vh 3vh 0"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="tabSwicthbox">
			<li v-for="(item,index) in tabListText" :key="index" :class="{active:tabListIndex==index}" @click="tabClick(item,index)"><span>{{item.name}}</span></li>
		</div>
		<div class="bottomBox">
			<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage"></table-block>
		</div>
	</div>
</template>

<script>
import {getcreditData,getcreditData1,getcreditData2,getcreditData3} from '@/api/pages.js'
export default {
	name: "credit-evaluation",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		TableBlock:()=>import('@/components/table-block'),
	},
	props: {},
	data() {
		return {
			tabListText:[
				// {name:'开庭公告',id:'P019'},
				{name:'行政处罚数据',id:'P043'},
				{name:'失信数据',id:'P044'},
				// {name:'招聘信息',id:'P020'},
				// {name:'获奖数据',id:'P021'},
				// {name:'重大税收违法',id:'P022'},
				// {name:'严重违法工商公示',id:'P023'},
			],
			companyId:this.$route.query.companyId||1,
			tabListIndex:0,
			currePage:1,
			pictorialBarOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状图渐变色
					{
						topColor:'#3af5c4',
						bottomColor:'#43eb84'
					},
				],
			},
			singleLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(92, 210, 254,1)",
						bottomColor:"rgba(92, 210, 254, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(105, 209, 239,.2)",
						bottomColor:"rgba(105, 209, 239, 0)"
					},
				],
				LineCircleColor:"#14d0e1",//折线图颜色
				LineCircleBorderColor:"none",//折线图描边颜色
				lineRadiusColor:'#EFEC3C',//折点颜色
			},
			pageSize:4,
			total:0,
			oprData:{},
			listdata:[
				{img:require('../../assets/images/company.png'),name:'',title:'企业名称'},
				{img:require('../../assets/images/service.png'),name:'',title:'企业状态',},
				{img:require('../../assets/images/timesel.png'),name:'',title:'成立时间'},
				{img:require('../../assets/images/anbao.png'),name:'',title:'企业信用等级'},
				{img:require('../../assets/images/paiming.png'),name:'',title:'最新排名'}
			],
			companyType:'P043'
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getcreditData('C035',this.companyId)
		this.getcreditData1('E070',this.companyId)
		this.getcreditData2('E071',this.companyId)
		this.getcreditData3(this.companyType,this.companyId,1,this.pageSize)
	},
	methods: {
		currentChange(e){
			this.currePage=e
			this.getcreditData3(this.companyType,this.companyId,e,this.pageSize)
		},
		tabClick(item,index){
			this.tabListIndex=index
			this.companyType=item.id
			this.currePage=1
			this.getcreditData3(this.companyType,this.companyId,1,this.pageSize)
		},
		// 基本信息
		getcreditData(busiCode,qyId){
			getcreditData(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					this.listdata[0].name=res.data.data.list[0].name
					this.listdata[1].name=res.data.data.list[0].qyzt
					this.listdata[2].name=res.data.data.list[0].clsj
					if(res.data.data.list[0].hmdjl!=''){
						this.listdata[1].err=res.data.data.list[0].hmdjl
					}
					this.listdata[3].name=res.data.data.list[0].qyxydf
					this.listdata[4].name=res.data.data.list[0].zxpm
				}
			}).catch(err=>{

			})
		},
		// 企业信用得分趋势
		getcreditData1(busiCode,qyId){
			getcreditData1(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					this.pictorialBarOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						LinearGradientColor:[//柱状图渐变色
							{
								topColor:'#3af5c4',
								bottomColor:'#43eb84'
							},
						],
					}
				}
			}).catch(err=>{

			})
		},
		// 企业信用得分趋势
		getcreditData2(busiCode,qyId){
			getcreditData2(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					let datas = res.data.data.seriesData[0].data
					let lineData =new Array(datas.length)
					for(let i=0;i<lineData.length;i++){
						if(i==0){
							lineData[0]=datas[0]
						}else if(i==lineData.length-1){
							lineData[lineData.length-1]=datas[lineData.length-1]
						}else{
							lineData[i]=0
						}
					}
					this.singleLineOptionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: [
							{
								data: lineData,//折线图两侧竖线数据
							},
							res.data.data.seriesData[0]
						],
						LinearGradientColor:[//渐变色
							{ //折线图两侧竖线数据渐变色
								topColor:"rgba(92, 210, 254,1)",
								bottomColor:"rgba(92, 210, 254, 0)"
							},
							{//折线图填充区域渐变色
								topColor:"rgba(105, 209, 239,.2)",
								bottomColor:"rgba(105, 209, 239, 0)"
							},
						],
						LineCircleColor:"#14d0e1",//折线图颜色
						LineCircleBorderColor:"none",//折线图描边颜色
						lineRadiusColor:'#EFEC3C',//折点颜色
					}
				}
			}).catch(err=>{

			})
		},
		// 列表
		getcreditData3(busiCode,qyId,current,size){
			getcreditData3(busiCode,qyId,current,size).then(res=>{
				if(res.data.code==200){
					this.oprData={}
					this.oprData.tableData=res.data.data.tableData
					this.oprData.list=res.data.data.list.records
					this.total=res.data.data.list.total
				}
			}).catch(err=>{

			})
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.corporate-portrait {
	width:100%;
	height:68vh;
	.topBox{
		width:100%;
		height:49%;
		.boxs{
			width:100%;
			height:32.7vh;
			overflow: hidden;
			// padding:1.5vh;
			box-sizing: border-box;
			background: rgba(0, 186, 216, .24);
			border: 1px solid #0CFCFF;
			// -webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
			// box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
			li{
				list-style: none;
				width:100%;
				height:6.5vh;
        line-height: 6.5vh;
				border-bottom:1px solid RGBA(22, 137, 168, 1);
				position: relative;
				padding:0 2vw;
				box-sizing: border-box;
				img{
					width:1.3vw;
					height:3vh;
					float: left;
					margin-top:1.5vh;
					margin-right:1vw;
					object-fit: 100% 100%;
				}
				span{
					color:#fff;
					font-size:0.98vw;
					font-weight: bold;
				}
				span.colorSpan{
					color:RGBA(12, 252, 255, 1);
          display: inline-block;
          width: 30%;
          height: 100%;
          border-right: 1px solid RGBA(22, 137, 168, 1);
				}
				span.errorIt{
					line-height: 20px;
					color:#FD3434;
					padding:1px 5px;
					position: absolute;
					left:4.2vw;
					top:3.3vh;
					background: rgba(253,52,52,.35);
					border-radius: 4px;
					font-weight: normal;
					font-size: 12px;
				}
			}
			li:last-child{
				border:none
			}
		}
	}
	.tabSwicthbox{
		width:100%;
		height:4.7vh;
		margin-bottom:1vh;
		background-image: linear-gradient(to right, rgba(3, 66, 123, .2),rgba(3, 66, 123, .1), rgba(3, 66, 123, 0));
		padding:0 2vh;
		display: flex;
		margin-top:2vh;
		li{
			flex: 1;
			height: 100%;
			list-style: none;
			transform:skew(-45deg);
			background-color: rgba(0, 155, 180, .21);
			float: left;
			margin-right:.2vw;
			border:.5px solid rgba(6, 140, 145, 1);
			span{
				display: block;
				line-height: 4.5vh;
				color:rgba(231, 255, 252, 1);
				text-align: center;
				transform:skew(45deg);
				font-size: 0.95vw;
				font-weight: bold;
				cursor: pointer;
			}
		}
		li.active{
			background-color: rgba(6, 140, 145, 1);
			span{
				color:rgba(231, 255, 252, 1)
			}
		}
	}
	.bottomBox{
		width:100%;
		height:46%;
		margin-top:.5vh;
		overflow-y: auto;
		padding-bottom:4vh
	}
}
</style>
